<template>
  <el-card :style="{borderColor: getStatusColor(data.status) }" body-style="padding: 0;" class="box-card">
    <div class="box-main">
      <div class="box-left">
        <el-row>
          <el-col :span="24">
            <div class="box-img-wrap">
              <div class="img-title">
                <el-image class="img-item" :src="getNodeIcon(data.type)" fit="contain" />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="box-text">
              {{ data.title }}
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="box-right">
        <el-icon v-if="data.status == 'run'" class="is-loading" :style="{color: getStatusColor(data.status)}">
          <RefreshRight />
        </el-icon>
        <el-icon v-if="data.status == 'success'" :style="{color: getStatusColor(data.status)}">
          <CircleCheck />
        </el-icon>
        <el-icon v-if="data.status == 'error'" :style="{color: getStatusColor(data.status)}">
          <CircleClose />
        </el-icon>
        <el-icon v-if="data.status == 'init'" :style="{color: getStatusColor(data.status)}">
          <Clock />
        </el-icon>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
import { getNodeIcon, getStatusColor } from "../utils/BaseNode";
import { NodeData } from '../model/NodeModel';
import { RefreshRight, CircleCheck, CircleClose, Clock } from '@element-plus/icons-vue'
import { Node } from '@antv/x6'

const getNode = inject('getNode')
const data = ref({} as NodeData)

onMounted(() => {
  const node = getNode as Function
  data.value = node().data
  const nodeItem = node() as Node
  nodeItem.on('change:data', ({ current }) => {
    const { status } = current
    data.value.status = status
  })
})

</script>

<style lang="less" scoped>
.box-card{
  width: 110px;
  height: 40px;
  border-color: #409EFF;

  .box-main{
    display: flex;

    .box-left{
      width: 82px;
      height: 40px;

      .box-img-wrap{
        display: flex;
        justify-content: center;
        align-items: center;

        .img-title{
          padding-top: 2px;
          width: 50px;
          height: 15px;

          .img-item{
            width: 50px;
            height: 15px;
          }
        }
      }

      .box-text{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 23px;
        font-size: 12px;
      }
    }

    .box-right{
      width: 28px;
      height: 40px;
      display: flex;
      justify-content: start;
      align-items: center;
    }

  }

}
</style>